<!--
 - Author : wang885298.
 - Date   : 2019/3/28.
 - File   : buildingMsg.楼栋列表组件
 -->

<template>
  <div class="bulidWarp">
    <msg :title="title" labelWidth="360px" :clickCB="close" pos="absolute">
      <div class="build-list"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="build-list-item" v-for="(item,index) in buildList" :key="index"
            @click="getZhuHuCYList(item)">
          <div class="build-list-item-left">{{item.fangHao||'暂无数据'}}</div>
          <div class="build-list-item-right">
            <div class="build-list-item-right-mul">
              <div class="build-list-item-right-mul-son">户主姓名 <span class="name">{{item.xingMing||'张三'}}</span></div>
              <div class="build-list-item-right-mul-son">性别<span>{{item.xingBieMc||'暂无数据'}}</span></div>
            </div>
            <div class="build-list-item-right-single">联系电话<span class="vals">{{item.yiDongDh||'暂无数据'}}</span></div>
            <div class="build-list-item-right-single">证件类型<span class="vals">{{item.zhengjianleixingmc||'暂无数据'}}</span></div>
            <div class="build-list-item-right-single">证件号码<span class="vals">{{item.zhengjianhaoma||'暂无数据'}}</span></div>
          </div>
        </div>
        <div class="null" style="margin-top: 200px"
            v-show="!buildList && loading===false">
          暂无数据
        </div>
        <div class="bulid-page">
          <el-pagination
              layout="prev, pager, next"
              :current-page="currentPage"
              :page-size="pageSize"
              :total="total"
              @current-change="handleNextPage">
          </el-pagination>
        </div>
      </div>
    </msg>
    <transition name="el-zoom-in-center">
      <houseMsg class="housePos" :title="fangHao" :houseList="houseList" v-show="houseShow"
          @closeHouse="houseShow=false"></houseMsg>
    </transition>
  </div>
</template>

<script>
  import houseMsg from '@/components/houseMsg'
  export default {
    data() {
      return {
        loading: true,
        title: '1号楼',
        buildList: [],
        houseShow: false,
        currentPage: 1,
        pageSize: 5,
        total: 1,
        houseList: [],
        fangHao: '1002'
      }
    },
    props: {
      info: {
      }
    },
    components: {
      houseMsg
    },
    mounted() {
      this.getLouDongZhuHuList(this.currentPage, this.pageSize)
      console.log('测试', this.info)
    },
    methods: {
      /**
       * 获取楼栋住户列表
       * @author whl
       */
      getLouDongZhuHuList(page, pageSize) {
        let params = {
          guanLianMdzj: this.info.guanLianMdzj,
          ldxxZj: this.info.ldxxZj,
          page: page,
          pageSize: pageSize
        }
        this.loading = true
        this.$request.louDongZhuHuListGet(params).then(res => {
          if (!this.$utils.isEmptyObject(res)) {
            this.loading = false
            console.log('查看楼栋住户列表1', res)
            this.buildList = res.recordList
            this.total = res.totalCount
          }
        })
      },
      /**
       * 获取住户成员列表
       * @author whl
       */
      getZhuHuCYList(item) {
        let params = {
          ldxxZj: this.info.ldxxZj,
          fangHao: item.fangHao
        }
        this.fangHao = item.fangHao
        this.$request.zhuHuCYListGet(params).then(res => {
          if (!this.$utils.isEmptyObject(res)) {
            console.log('查看住户成员列表', res)
            this.houseList = res
            this.houseShow = true
          }
        })
      },
      /**
       * 楼房列表点击分页
       */
      handleNextPage(val) {
        console.log('查看分页1', val)
        this.currentPage = val
        this.getLouDongZhuHuList(this.currentPage, this.pageSize)
      },
      /**
       * 关闭楼栋列表
       * @author whl
       */
      close() {
        this.$emit('closeBuild')
      }
    }
  }
</script>

<style ref="stylesheet/lesss" lang="less">
  /*@import "../../assets/less/myElement";*/
  .bulidWarp{
    text-align: left;
    position: relative;
    .build-list{
      padding: 10px 0;
      &-item{
        background: #093259;
        margin-bottom: 10px;
        padding: 15px 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        &-left{
          width: 60px;
          height: 60px;
          background: #0b4e86;
          border-radius: 50%;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
        }
        &-right{
          margin-left: 15px;
          color: #62dcff;
          font-size: 14px;
          &-single{
            margin-bottom: 5px;
            .vals{
              color: #00ddc6;
              margin-left: 15px;
            }
          }
          &-single:last-child{
            margin-bottom: 0;
          }

          &-mul{
            color: #62dcff;
            font-size: 14px;
            display: flex;
            margin-bottom: 5px;
            &-son{
              margin-right: 10px;
              span{
                color: #00ddc6;
                margin-left: 10px;
              }
              span.name{
                color: #fff;
                font-size: 15px;
              }
            }
          }
        }
      }
    }
    .housePos{
      position: fixed;
      z-index: 9999;
      left: 520px;
      top: 100px;
    }
    /*分页重写样式*/
    .bulid-page{
      text-align: center;
      margin-top: 25px;
      .el-pager li{
        background: transparent;
        color: #657b8d;
        min-width: 0;
        margin: 0 3px;
      }
      .el-pagination .btn-next, .el-pagination .btn-prev{
        padding-right: 5px;
        background-color: transparent;
        color: #657b8d;
      }
      .el-input__inner{
        border-color: #657b8d;
        background-color: transparent;
        width: 80%;
        height: 20px;
        color: #657b8d;
        border-radius: 0;
      }
      .el-pagination__jump{
        color: #657b8d;
      }
      .el-pager li.active {
        color: #00ffff;
        border-bottom: 1px solid #00ffff;
      }
      .btn-prev .el-icon-arrow-left:before {
        content: '< 上一页';
      }
      .btn-next .el-icon-arrow-right:before {
        content: '下一页 >';
      }
    }
  }
</style>
